<template>
    <!-- 运维 Operation op brief view of main -->
    <div class="brief-view-content" @click="drill">
        <div class="brief-view-title">运维</div>

        <!-- start:: ornament center -->
        <div class="brief-ornament-center outer"></div>
        <div class="brief-ornament-center inner"></div>
        <div class="brief-ornament-center state">良</div>
        <div class="brief-ornament-center title">系统状态</div>
        <!-- end:: ornament center -->

        <div class="row justify-content-between" style="margin-top: 20px;">
            <div class="info col-4 row justify-content-end mt-5">
                <div class="col-3 align-self-center sub-title-flag"></div>
                <div class="col-8 align-self-center sub-title">总负载</div>
                <div class="col-9 number">{{TotalLoad}}%</div>
                <div class="col-12 footer"></div>
            </div>
            <div class="info col-4 row justify-content-end mt-5">
                <div class="col-3 align-self-center sub-title-flag"></div>
                <div class="col-8 align-self-center sub-title">上行流量</div>
                <div class="col-9 number">{{todayTotal}}</div>
                <div class="col-12 footer"></div>
            </div>
        </div>
        <div class="row justify-content-between" style="margin-top: 50px;">
            <div class="info col-4 row justify-content-end mt-5">
                <div class="col-3 align-self-center sub-title-flag"></div>
                <div class="col-8 align-self-center sub-title title-3">今日充电数</div>
                <div class="col-9 number">{{allTotal}}<span>KWH</span></div>
                <div class="col-12 footer"></div>
            </div>
            <div class="info col-4 row justify-content-end mt-5">
                <div class="col-3 align-self-center sub-title-flag"></div>
                <div class="col-8 align-self-center sub-title title-4">本月充电数</div>
                <div class="col-9 number">{{Uplink}}<span>KWH</span></div>
                <div class="col-12 footer"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import TWEEN from "@tweenjs/tween.js";

    export default {
        name: "BriefViewOperation",
        props: {
            viewTag: String
        },
        data() {
            return {
                todayTotal: 36872,
                allTotal: 15.16,
                Uplink: 235,
                TotalLoad: 10.16,
                num1: 0,
                num2: 0,
                num3: 0,
                num4: 0
            }
        },
        mounted() {
            this.num1 = Number(this.todayTotal);
            this.num2 = Number(this.allTotal);
            this.num3 = Number(this.Uplink);
            this.num4 = Number(this.TotalLoad);
        },
        watch: {
            num1(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.todayTotal = tween.number.toFixed(0)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            },
            num2(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.allTotal = tween.number.toFixed(2)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            },
            num3(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.Uplink = tween.number.toFixed(0)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            },
            num4(newValue, oldValue) {
                let _t = this;
                new TWEEN.Tween({
                    number: oldValue
                }).to({
                    number: newValue
                }, 5000)
                    .onUpdate(tween => {
                        _t.TotalLoad = tween.number.toFixed(2)
                    }).start()

                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate);
                    }
                }

                animate()
            }
        },
        methods: {
            drill() {
                this.$router.push({name: "main-operation-page"})
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/sass/init";

    .brief-view-content {
        cursor: pointer;

        .brief-view-title {
            bottom: $brief-view-padding;
        }

        .sub-title-flag {
            width: 70px;
            height: 30px;
            background: url("/media/main/operation/head-title.png");
        }

        .sub-title {
            color: white;
            font-family: zzgflh, "微软雅黑", serif;
            font-size: $font-size-base * 2.5;
            text-align: right;
        }

        .number {
            text-align: right;
            font-family: stencilstd, "微软雅黑", serif;
            font-size: $font-size-base * 4;
            background-image: -webkit-linear-gradient(#00ffff, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            span {
                font-size: $font-size-base * 2;
            }
        }

        .footer {
            background: url("/media/main/operation/line.png") no-repeat;
            height: 20px;
        }

        .brief-ornament-center.outer {
            $size: 300px;
            position: absolute;
            width: $size;
            height: $size;
            top: calc(($view-xs-height - $size) / 2);
            left: calc(($view-xs-width - $size) / 2);

            background: url("/media/main/operation/status1.png");
            background-size: cover;
            @keyframes inner-scale {
                from {
                    transform: scale(1);
                }
                to {
                    transform: scale(1.1);
                }
            }
            @include animation(inner-scale 3s infinite alternate)
        }

        .brief-ornament-center.inner {
            $size-inner: 260px;
            position: absolute;
            width: $size-inner;
            height: $size-inner;
            top: calc(($view-xs-height - $size-inner) / 2);
            left: calc(($view-xs-width - $size-inner) / 2);

            background: url("/media/main/operation/status2.png");
            background-size: cover;
            @keyframes inner-rotate {
                from {
                    transform: rotate(-15deg);
                }
                to {
                    transform: rotate(15deg);
                }
            }
            @include animation(inner-rotate 5s infinite alternate)
        }

        .brief-ornament-center.state {
            position: absolute;
            top: calc($view-xs-height / 2 - 60px);
            left: calc($view-xs-width / 2 - 40px);
            color: white;
            font-size: $font-size-base * 6;
            text-shadow: 0 0 5px #fff;

            background-image: -webkit-linear-gradient(#00ffff, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .brief-ornament-center.title {
            width: 127px;
            height: 45px;
            text-align: center;
            line-height: 43px;
            top: calc($view-xs-height / 2 + 50px);
            left: calc($view-xs-width / 2 - 65px);

            border: 1px solid #2da9ae;
            border-radius: 18px;
            position: absolute;

            background: #031834;

            color: #36d1da;
            font-size: $font-size-base * 2;
            font-weight: 500;
        }
    }
</style>